<template>

  <div id="outterDiv">
    <h1>克隆被拖拽项目到另外一个列表中（把水果拖拽到动物列表中（单向））</h1>
    <router-link to="/move">跳转两列表互相移动拖拽</router-link>
    <br>
    <router-link to="/nested">跳转嵌套列表移动拖拽</router-link>
    <br>
    <div>

      <draggable :list="fruitList" :group="{ name: 'fruit', pull: 'clone', put: false }" :clone="cloneFruit"
                 v-bind="dragOptions" class="dragArea list-group">
        <TransitionGroup>
          <!-- 推荐把要拖拽的元素放入到  TransitionGroup 组件中，vue 推荐做法-->
          <div v-for="fruit in fruitList" :key="fruit.id" class="draggableItem list-group-item">
            {{ fruit.name }}
          </div>
        </TransitionGroup>

      </draggable>


    </div>

    <div>
      <draggable :list="animalList" group="fruit" class="dragArea list-group" @start="startDraggle"
                 @end="endDraggle" v-bind="dragOptions">

        <TransitionGroup type="transition">


          <div v-for="animal in animalList" :key="animal.id" class="draggableItem list-group-item">
            {{ animal.name }}
          </div>
        </TransitionGroup>
      </draggable>
    </div>

    <hr style="margin-top:100px">
    <textarea style="width:600px;height: 250px;">
            参考：https://github.com/SortableJS/Vue.Draggable
            使用说明：

            1、两个 draggable 组件的数据源都必须声明为 :list
                因为 draggable 修改数据是将拽入的组件 通过 数组的 splice() 方法放入到被拽入列表的数组中的
            2、源 draggable  必须声明 :group="{ name: 'fruit', pull: 'clone', put: false }"
            3、目标 draggable 必须声明    group="fruit"
            4、源 draggable 和 目标 draggable group 的名称必须一致
            5、如果要自定义 被拖拽元素的数据，那么可以使用 clone 方法
        </textarea>

  </div>
</template>
<script>
import draggable from "vuedraggable"
import {uuid} from 'vue-uuid'

export default {
  components: {
    draggable
  },
  data() {
    return {

      // animal 是否正在拖拽中
      animalDraging: false,

      fruitList: [
        {
          id: 1,
          name: "香蕉"
        }, {
          id: 2,
          name: "菠萝"
        }, {
          id: 3,
          name: "梨"
        }, {
          id: 4,
          name: "葡萄"
        }
      ],
      animalList: [
        {
          id: 10,
          name: '小屁孩'
        }, {
          id: 11,
          name: "程序员"
        }, {
          id: 12,
          name: "售前"
        }, {
          id: 14,
          name: "打工仔"
        }
      ],

    }
  },
  computed: {
    /**
     * 拖拽动画效果的选项
     * 直接通过 v-bind="dragOptions" 绑定到 draggable 组件上
     * v-bind 会自动把 dragOptions 中的所有属性展开并 依次绑定
     */
    dragOptions() {
      return {
        animation: 200,
        // group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    }
  },

  methods: {
    startDraggle(e) {
      this.animalDraging = true
      // this.$message.success("开始拖拽!"+e)
    },
    endDraggle(e) {
      // this.$message.info("停止拖拽！"+e)
      this.animalDraging = false
    },

    /**
     * 拷贝节点的数据
     * @param {} fruit
     */
    cloneFruit(fruit) {


      return {
        id: uuid.v4(),
        name: fruit.name
      }
    }
  }
}
</script>

<style>
#outterDiv > div {
  float: left;
  width: 50%
}

.draggableItem {
  /* padding-top:50px; */
  width: 300px;
  height: 50px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .125);
}
</style>
